<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小红书-找到国外的好东西！小红书福利社正品保证，保税仓闪电发货！</title>
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/footer.css">
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/artTemplate.js"></script>
    <style>
        body{
            padding: 0;
            margin: 0;
            font-family: "微软雅黑";
            color: #333333;
            background-color: rgb(238,238,238);
        }
        a{
            text-decoration: none;
            color: rgb(129,129,129);
        }
        ul{
            list-style-type: none;
        }

    </style>
</head>
<body>
<header class="header">
    <img src="http://s4.xiaohongshu.com/static/img/web/home/logo_xhs_v2.png?s=1471971752" alt="">
    <div class="header-nav">
        |<a class="active" href="">首页</a>
        |<a href="">福利社</a>
        |<a href="">发现</a>
        |<a href="">目的地</a>
        |<a href="">媒体报道</a>
        |<a href="">加入</a>|
    </div>
</header>
<div class="main">
    <!--轮播部分-->
    <div class="slider">
        <a class="slider-left" href="">
            <img style="display: none" src="http://s4.xiaohongshu.com/static/img/web/home/left_arrow.png?s=1471971752">
        </a>
        <a class="slider-right"  href="">
            <img style="display: none" src="http://s4.xiaohongshu.com/static/img/web/home/right_arrow.png?s=1471971752">
        </a>
        <ul class="slider-img">
            <li><img src="http://s4.xiaohongshu.com/static/img/web/home/banner_a.jpg?s=1475084382" alt=""
                     style="left: 1200px; display: inline;"/>
            </li>
            <li><img src="http://s4.xiaohongshu.com/static/img/web/home/banner_e.jpg?s=1471971752" alt=""
                     style="left: 1200px; display: inline;"/>
            </li>
            <li><img class="" src="http://s4.xiaohongshu.com/static/img/web/home/banner_d.jpg?s=1471971752" alt="小红书_下载APP"
                     style="left: 1200px; display: inline;"/>
            </li>
        </ul>
    </div>
    <!--<div style="margin: auto">-->
    <div class="selected">每日精选笔记
        <span class="more">
            更多
            <img src="http://s4.xiaohongshu.com/static/img/web/home/arrow.png?s=1471971752">
        </span>
    </div>
    <ul class="specify" style="margin: 0;width: 100%;height: 1974px">

    </ul>
    <!--</div>-->
</div>
<div class="footer">
    <div class="footer-nav">
        <ul>
            <li><a href="">发现</a></li>
            <li><a href="">福利社</a></li>
            <li><a href="">目的地</a></li>
            <li><a href="">媒体报道</a></li>
            <li><a href="">联系我们</a></li>
            <li><a href="">加入</a></li>
            <li><a href="">关于</a></li>
            <li><a href="">条款</a></li>
            <li><a href="">IOS</a></li>
            <li><a href="">安卓</a></li>
        </ul>
    </div>
    <p>xiaohongshu.com 保留最终解释权</p>
    <div><a href="http://www.miibeian.gov.cn/state/outPortal/loginPortal.action">沪ICP备 13030189号</a></div>
    <p>Copyright © 2014-2016 行吟信息科技（上海）有限公司</p>
    <div>
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010102002533">
        <img src="http://ci.xiaohongshu.com/44b0b2b0-0cee-475e-9d49-b86e0d5b7f83" alt="">
        <span>沪公网安备 31010102002533号</span>
        </a>
    </div>
    <p>
        <a href="https://www.sgs.gov.cn/lz/licenseLink.do?method=licenceView&entyId=1atr5hendjiu232ts5vsjpmianrue3hdl91540lw808sjpncif">
        <img src="http://s4.xiaohongshu.com/static/img/web/home/shanghaigongshang.gif?s=1471971752" border="0">
        </a>
    </p>
</div>
<!--specify模板-->
<script id="specifyTemp" type="text/html">
    <li class="neirong">
        <a href="#">
            <div class="spe-img">
                <img src="{{imageb}}" alt="">
            </div>
            <div class="spe-text">{{desc}}</div>
            <div class="spe-info">
                <a href=""><img src="//s4.xiaohongshu.com/static/img/v2/web/common/comment.png" alt="">
                    <span>{{comments}}</span></a>
                <a href="" style="position: absolute;right: 50px"><img src="//s4.xiaohongshu.com/static/img/v2/web/common/unfollow.png" alt="">
                    <span>{{likes}}</span></a>
            </div>
        </a>
    </li>
</script>
<!--js---代码-->
<script type="text/javascript">
    var nowImg=0;
    var lis=$(".slider-img li");
    var $bannerIn=$(".slider-img");
    $(".slider-img li:first").clone().appendTo(".slider-img");
    function donghua(){
        $bannerIn.animate({
            "left":nowImg*(-1200)
        },700)
    }
    //			按钮事件
    $(".slider-left").mouseover(function () {
        $(".slider-left img").css("display", "block")
    }).click(function(){
        if(!$bannerIn.is(":animated")){//判断是否在运动
            if(nowImg>0){//用于区分是否在第一张图
                nowImg--;
                donghua();
            }else{
                nowImg=lis.length-1;//如果nowImg小于0就让它等于最大的值，就是跳到最后一张
                $bannerIn.css("left",lis.length*-1200);//用于让它实现平滑的切换，lis.length*-1200就是克隆的最后一张的位置
                donghua();
            }
        }
    }).mouseout(function () {
        $(".slider-left img").css("display", "none")
    });

    $(".slider-right").mouseover(function () {
        $(".slider-right img").css("display", "block")
    }).click(lunbo).mouseout(function () {
        $(".slider-right img").css("display", "none")
    });//调用lunbo函数
    function lunbo(){
        if(!$bannerIn.is(":animated")){//判断是否在运动
            if(nowImg<lis.length-1){//用于区分是否在第一张图
                nowImg++;
                donghua();
            }else{
                nowImg=0;//如果nowImg等于最大值就让它等于0，就是跳到第一张
                $bannerIn.animate({"left":lis.length*(-1200)},700,function(){//用回调函数就是因为没有克隆最后一张的，
                    //所以动画完成后让它平滑切换到第一张
                    $bannerIn.css("left",0);//用于让它实现平滑的切换
                })
            }
        }
    }
    //自动轮播
    t=setInterval(lunbo,1500)//无限轮播
    $(".slider").mouseenter(function() {//当鼠标移上来时就清除无限轮播事件
        clearInterval(t);
    });
    $(".slider").mouseleave(function() {//当鼠标离开时就执行无限轮播
        clearInterval(t);
        t=setInterval(lunbo,1500)
    });//轮播代码结束

//    $(function () {
        $.ajax({
            url: "json/index.json",//请求DetailList.json文件里面的数据
            method: "get",
            dataType: "json",
            success:function (data) {
                $.each(data.array,function (i,value) {
                    var $li = $(template("specifyTemp", value)).appendTo(".specify");
                });
            }
        });
//    });
</script>
</body>
</html>